<template>
	<div>
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px">
			<div class="container add_edit">
				<h3 class="margin_b_20">基本信息</h3>
				<div>
					<el-form-item label="分类" prop="cid" ref="cid">
						<el-cascader :append-to-body="false" v-model="form.cid" :show-all-levels="false"
							:options="categoryOptions" @change="categoryChange" ref="cascaderObj"
							:props="{ checkStrictly: true, emitPath: false, value: '_id', label: 'name' }" clearable>
							<template slot-scope="{ node, data }">
								<div @click="categoryChange(data._id)" class="cascader">{{data.name}}</div>
							</template>
						</el-cascader>
					</el-form-item>
					<el-form-item label="排序">
						<el-input v-model.number="form.sort" placeholder="请输入排序" type="number" :min="1" clearable
							oninput="value = parseInt(value) || 1">
						</el-input>
						<div class="remark_txt">数字越小，排名越靠前</div>
					</el-form-item>
					<el-form-item label="商品名称" prop="name" ref="name">
						<el-input placeholder="请输入商品名称" v-model="form.name" clearable></el-input>
					</el-form-item>
					<el-form-item label="推广词">
						<el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.name_pw"
							placeholder="请输入推广词"></el-input>
						<div class="remark_txt">非必填</div>
					</el-form-item>
				</div>
			</div>
			<div class="container add_edit">
				<h3 class="margin_b_20">商品信息</h3>
				<div>
					<el-form-item label="商城积分" prop="integral" ref="integral">
						<el-input v-model.number="form.integral" placeholder="请输入商城积分" type="number" :min="0" clearable
							oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">用户兑换所需积分</div>
					</el-form-item>
					<el-form-item label="商城价" prop="price" ref="price">
						<el-input v-model.number="form.price" placeholder="请输入商城价" type="number" :min="0" clearable
							oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">单位为分，{{ form.price || 0 }} 分 = {{ form.price / 100 }} 元</div>
					</el-form-item>
					<el-form-item label="限购量" prop="limit" ref="limit">
						<el-input v-model.number="form.limit" placeholder="请输入限购量" type="number" :min="0" clearable
							oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">0为不限购</div>
					</el-form-item>
					<el-form-item label="库存" prop="stock_num" ref="stock_num">
						<el-input v-model.number="form.stock_num" placeholder="请输入库存" type="number" :min="0" clearable
							oninput="value = parseInt(value)">
						</el-input>
					</el-form-item>
					<el-form-item label="已兑换数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.exchange_cnt" placeholder="请输入已兑换数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.exchange" :true-label="1"
								:false-label="0">显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作虚兑换量</div>
					</el-form-item>
					<el-form-item label="已访问数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.visit_cnt" placeholder="请输入已访问数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.visit" :true-label="1" :false-label="0">
								显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作访问销量</div>
					</el-form-item>
					<el-form-item label="已收藏数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.collect_cnt" placeholder="请输入已收藏数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.collect" :true-label="1"
								:false-label="0">显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作收藏销量</div>
					</el-form-item>
					<el-form-item label="已分享数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.share_cnt" placeholder="请输入已分享数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.share" :true-label="1" :false-label="0">
								显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作分享销量</div>
					</el-form-item>
					<!-- <el-form-item label="下架时间" prop="sold_out_time" ref="sold_out_time">
						<el-date-picker
							ref="datetime"
							v-model="form.sold_out_time"
							type="datetime"
							placeholder="下架时间"
							align="center"
							popper-class="integral_basic_time"
							class="time"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss"
							:picker-options="pickerTimeOptions"
						></el-date-picker>
					</el-form-item> -->
					<el-form-item label="状态">
						<el-radio-group v-model="form.state">
							<el-radio label="待审核">待审核</el-radio>
							<el-radio label="销售中">销售中</el-radio>
							<el-radio label="已下架">已下架</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			const validateIntegral = async (rule, value, callback) => {
				if (value === 0) {
					return callback(new Error('商城积分不能为0'));
				}

				if (!value || value < 0) {
					return callback(new Error('请输入商城积分'));
				}

				callback();
			};
			return {
				categoryOptions: [],
				form: {
					cid: '',
					cids: [],
					sort: 0,
					name: '',
					name_pw: '',
					integral: 0,
					price: 0,
					limit: 0,
					stock_num: 0,
					exchange_cnt: 0,
					exchange: 0,
					visit_cnt: 0,
					visit: 0,
					collect_cnt: 0,
					collect: 0,
					share_cnt: 0,
					share: 0,
					sold_out_time: '',
					state: '待审核'
				},
				pickerTimeOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					}
				},
				rules: {
					cid: [{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}],
					name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'change'
					}],
					integral: [{
						required: true,
						validator: validateIntegral,
						trigger: 'change'
					}],
					price: [{
						required: true,
						message: '请输入商城价',
						trigger: 'change'
					}],
					stock_num: [{
						required: true,
						message: '请输入库存',
						trigger: 'change'
					}],
					sold_out_time: [{
						required: true,
						message: '请选择下架时间',
						trigger: 'change'
					}]
				}
			};
		},
		methods: {
			setChildren(res) {
				res.forEach(item => {
					if (item.children && item.children.length <= 0) {
						item.children = null;
						return;
					}

					this.setChildren(item.children);
				});
			},
			setBaseData(res) {
				this.setChildren(res[0].datas);
				this.categoryOptions = res[0].datas;
			},
			setSort(res) {
				this.form.sort = ++res;
			},
			submitData(callback) {
				this.$refs.ruleForm.validate((valid, obj) => {
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						let cascaderObj = this.$refs.cascaderObj.getCheckedNodes();
						this.form.cids = cascaderObj[0].path;

						if (typeof callback === 'function') {
							callback(this.form, valid);
						}
					} else {
						if (typeof callback === 'function') {
							callback(this.form, valid);
						}
						return false;
					}
				});
			},
			getData(callback) {
				this.submitData(callback);
			},
			setData(data) {
				data.cids = data.cids || [];
				this.form.cid = data.cid;

				for (const key in this.form) {
					if (this.form.hasOwnProperty(key) && key != 'cid') {
						this.form[key] = data[key];
					}
				}
			},
			categoryChange(id) {
				this.form.cid = id || '';
				if (this.form.cid) {
					this.$refs.cid.clearValidate();
				}
				this.$refs.cascaderObj.dropDownVisible = false;
			}
		},
		mounted() {
			const ele = document.querySelector('.el-tabs__content');

			this.$nextTick(() => {
				ele.addEventListener('scroll', () => {
					if (this.$refs.cascaderObj && this.$refs.cascaderObj.dropDownVisible) {
						this.$refs.cascaderObj.dropDownVisible = false;
					}
					if (this.$refs.datetime && this.$refs.datetime.pickerVisible) {
						this.$refs.datetime.pickerVisible = false;
					}
				});
			});
		}
	};
</script>

<style>
	.cascader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 44px;
		z-index: 99;
	}

	.checkbox.el-checkbox {
		width: 54px;
	}
</style>
